var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');//css样式从js文件中分离出来,需要通过命令行安装 extract-text-webpack-plugin依赖包
var path = require('path');
var postcssImport = require('postcss-import'); //对根css或scss文件的@import引用文件一样能够进行autoprefixer
module.exports = {
    devtool: 'cheap-eval-source-map',//配置生成Source Maps，选择合适的选项, 便于调试
    entry: __dirname + '/src/js/app.js',//入口文件  entry 入口文件 让webpack用哪个文件作为项目的入口
    output: {//输出文件  output 出口 让webpack把处理完成的文件放在哪里
        //path: path.join(__dirname, './dist'),  // 输出到那个目录下（__dirname当前项目目录）
        path: __dirname + "/dist",
        // filename: 'bundle.js',
        filename: 'scripts/[name].js',
        // chunkFilename: 'scripts/[id].chunk.js',  //非入口文件命名规则
        publicPath: '../'   //绝对路径,publicPath 表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。
    },
    devServer: {
        port: 7777,
        host: '192.168.0.132',
        contentBase: __dirname,//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true,//实时刷新
        hot: true,
        lazy: true
    },
    module: {  // module 模块 要用什么不同的模块来处理各种类型的文件
        rules: [//加载器
            {test: /\.html$/, loader: 'raw'},
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: ['css-loader','sass-loader','postcss-loader']
                })
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader:'css-loader',
                            options: {
                                minimize: true //css压缩
                            }
                        }
                    ]
                })
            },
            //?modules&localIdentName=[name]---[local]---[hash:base64:5]
            // {
            //     test: /\.scss$/,
            //     use: ExtractTextPlugin.extract({
            //         fallback: 'style-loader',
            //         use: ['css-loader', 'sass-loader','postcss-loader']
            //     })
            //     //这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:'style!css!sass'
            // },
            {
                test: /\.(jpe?g|png|gif||svg)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=200&name=img/[name].[hash:8].[ext]'
                //loader 后面 limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于8192字节的图片正常打包，小于8192字节的图片以 base64 的方式引用。
            },
            // {test: /\.(png|jpg|ttf)$/, loader: 'url?limit=8192'}
            {
                // 专供iconfont方案使用的，后面会带一串时间戳，需要特别匹配到
                test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
                loader: 'file-loader?name=./static/fonts/[name].[ext]'
            }
        ]
    },

    plugins: [
        //插件项
        new ExtractTextPlugin(
            "css/style.css"
            // {
            //     filename: 'css/[name].css',
            //     disable: false,
            //     allChunks: true  //不包含内嵌样式
            // }
        ), //独立出CSS模块
        new webpack.LoaderOptionsPlugin({   //使用postcss插件
            options: {
                postcss: function (webpack) {
                    return [
                        postcssImport({
                            addDependencyTo: webpack
                        }),
                        require("autoprefixer")({
                            browsers: ['ie>=8', '>1% in CN']
                        })
                    ]
                }
            }
        }),
        // new webpack.optimize.UglifyJsPlugin({
        //     sourceMap: false,
        //     mangle: false,
        //     compress: {
        //         warnings: false
        //     }
        // })
    ]
};
